<template>
  <div>
    <!-- 添加封面 -->
    <el-dialog
      width="600px"
      :title="$t('cardHForm.titleForm')"
      :visible.sync="dialogFormVisible"
      @close="resetForm('cardHForm')"
    >
      <el-form
        ref="cardHForm"
        :rules="cardHFormRules"
        class="createCard"
        :model="cardHForm"
        label-width="160px"
      >
        <el-form-item prop="name" :label="$t('cardHForm.name')" required>
          <el-input v-model="cardHForm.name" />
        </el-form-item>
        <el-form-item prop="theme" :label="$t('cardHForm.RGB')" required>
          <el-input v-model="cardHForm.theme" />
        </el-form-item>
        <el-form-item prop="image" :label="$t('cardHForm.image')" required>
          <logoForm :image="cardHForm.image" @changeImage="changeImageCover" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addCardHSubmit('cardHForm')">{{
          $t("cardHForm.confirm")
        }}</el-button>

        <el-button @click="resetForm('cardHForm')">{{
          $t("cardHForm.cancel")
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import logoForm from '@/components/logoForm'
export default {
  components: { logoForm },
  data() {
    return {
      list: [],
      dialogVisible: false,
      dialogFormVisible: false,
      cardHForm: {
        name: '',
        theme: '#',
        image: ''
      },
      cardHFormRules: {
        name: [
          {
            required: true,
            message: this.$t('cardHFormRules.name'),
            trigger: 'blur'
          }
        ],
        theme: [
          {
            required: true,
            message: this.$t('cardHFormRules.theme'),
            trigger: 'blur'
          }
        ],
        image: [
          {
            required: true,
            message: this.$t('cardHFormRules.image'),
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    changeImageCover(e) {
      this.cardHForm.image = e
    },
    show() {
      this.dialogFormVisible = true
    },
    close() {
      this.dialogFormVisible = false
      this.$refs['cardHForm'].resetFields()
    },
    resetForm(formName) {
      this.form = {}
      this.$refs[formName].resetFields()
      this.dialogFormVisible = false
    },
    addCardHSubmit(formName) {
      console.log('======', this.cardHForm)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const { name, theme, image } = this.cardHForm
          const obj = {
            label: name,
            theme: theme,
            src: image,
            checked: false
          }
          this.$emit('changeCardV', obj)
          this.dialogFormVisible = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleAvatarSuccess(res, file) {
      this.getBase64(file.raw).then((res64) => {
        // console.log("file===", file);
        this.cardHForm.image = res64
        this.list = [{ url: res64 }]
        // console.log("this.cardHForm.image===", this.cardHForm.image);
      })
    },
    onExceed(files, fileList) {
      this.$message({
        message: this.$t('cardHFormRules.image'),
        type: 'warning'
      })
    },
    handleRemove(file, fileList) {
      this.cardHForm.image = ''
    },
    handlePictureCardPreview(file) {
      this.cardHForm.image = file.url
      this.dialogVisible = true
    },
    beforeAvatarUpload(file) {
      // 进行图片类型和大小的限制
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      const extension = testmsg === 'png'
      const extension2 = testmsg === 'jpg'
      const extension3 = testmsg === 'jpeg'
      const extension4 = testmsg === 'gif'
      if (!extension && !extension2 && !extension3 && !extension4) {
        this.$message({
          message: this.$t('cardHFormRules.formatTip'),
          type: 'warning'
        })
        return false // 必须加上return false; 才能阻止
      }
      const isSize = new Promise(function(resolve, reject) {
        const width = 800
        const height = 800
        const _URL = window.URL || window.webkitURL
        const img = new Image()
        img.onload = function() {
          const valid = img.width === width && img.height === height
          valid ? resolve() : reject()
        }
        img.src = _URL.createObjectURL(file)
      }).then(
        () => {
          return file
        },
        () => {
          //   this.$message({
          //     message: "Suggested size: 800*800 pixels",
          //     type: "warning",
          //   });
          return Promise.reject()
          //   return false // 必须加上return false; 才能阻止
        }
      )
      console.log(isSize)
      //   return (extension || extension2 || extension3 || extension4) && isSize;
    }
  }
}
</script>
<style lang="scss" scoped>
.createCard {
  .el-input,
  .el-select {
    width: 50%;
  }
}
</style>
